<template>
  <div class="chart-wrapper">
    <canvas id="chart" />
  </div>
</template>
<script setup>
import { onMounted , defineProps } from 'vue';
import Chart from 'chart.js/auto';

const props = defineProps({
    source: {
        type:Array,
        default:()=>[]
    }
})

const init = () => {
  new Chart(document.querySelector('#chart'), {
    type: 'line',
    data: {
      labels: props.source.map((row) => row.date),
      datasets: [
        {
          label: '温度',
              data: props.source.map((row) => row.tempHigh),
              cubicInterpolationMode: 'monotone',
              tension: 0.4,
              fill: false,
        },
      ],
    },
      options: {
        responsive: true,
        interaction: {
            intersect: false,
            },
          plugins: {
            
              title: {
                display:true,
                  text: '40天气温变化',
                color:'#333'
              },
              legend: {
                display:false
              },
              tooltip: {
                  callbacks: {
                      label: (ctx) => {
                          return '温度：'+ctx.parsed.y+'°'
                      }
                  }
              }
          },
          scales: {
              x: {
                  ticks: {
                      color: '#333',
                  },
                  border: {
                      color: '#333',
                      display:false
                  },
                  grid: {
                    color:'rgba(0,0,0,.2)'
                  },
              },
              y: {
                  ticks: {
                      color: '#333',
                  },
                  border: {
                      color: '#333',
                    display:false
                  },
                  grid: {
                    display:false
                    
                  },
              },
          }
    },
  });
};
onMounted(() => {
  init();
});
</script>
<style scoped lang="less">
.chart-wrapper {
    grid-area: a;
  width: 100%;
//   background-color: rgba(0, 0, 0, 0.08);
  background-color: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
  padding: 20px 10px 20px 20px;
  border-radius: 25px;
  box-sizing: border-box;
}
</style>
